<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .banner {
            width: 300px;
            height: 200px;
            margin: 100px auto;
            background-color: #f00;
            overflow: hidden;
            position: relative;
        }

        .banner ul {
            width: 1200px;
            display: flex;
            position: absolute;
            left: 0;
            transition: .3s;
        }

        .banner ul li {
            width: 300px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 50px;
        }


        .banner ol {
            width: 100%;
            position: absolute;
            display: flex;
            justify-content: center;
            bottom: 0;
        }

        .banner ol li {
            width: 20px;
            height: 20px;
            background-color: #ff0;
            margin: 10px;
        }

        .banner span {
            width: 20px;
            height: 30px;
            background-color: rgba(0, 0, 0, .5);
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            top: 0;
            bottom: 0;
            margin: auto;
            color: #fff;
        }

        #next {
            right: 0;
        }
    </style>
</head>

<body>


    <div class="banner">
        <ul id="ul" class="u">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ol>
            <li class="dot" style="background:green;"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
        </ol>
        <p>
            <span id="prev">&lt;</span>
            <span id="next">&gt;</span>
        </p>
    </div>



    <script>

        // 轮播
        //   每隔1s之后，播放下一张图片   ul的left值向左移动

        var oUl = document.getElementsByClassName('u')[0];  // 伪数组  数组中只有一个值
        console.log(oUl);

        var oLis = document.getElementsByClassName('dot');    // 获取元素，得到伪数组
        console.log(oLis);

        var oPrev = document.getElementById('prev');
        var oNext = document.getElementById('next');

        // 计数器  记录播放的第几张
        var index = 0;




        // 自动播放
        var t = setInterval(function () {
            if (index === 3) {
                index = -1;   // 因为后面有++
            }
            index++;
            // ul移动到对应的 位置  -index * 300
            oUl.style.left = - index * 300 + 'px';


            // 先清除所有的小方块的颜色
            // oLis[0].style.background = 'yellow' ;
            // oLis[1].style.background = 'yellow' ;
            // oLis[2].style.background = 'yellow' ;
            // oLis[3].style.background = 'yellow' ;
            for (var i = 0; i < oLis.length; i++) {
                oLis[i].style.background = 'yellow';
            }
            // 把当前播放的这一张变成绿色   index
            oLis[index].style.background = 'green';


        }, 1000)




        // 上翻页    把当前播放的这一张 -1       index
        //    清除定时器
        //    翻页到第一张的时候，切到最后一张
        oPrev.onclick = function () {
            clearInterval(t);
            if (index === 0) {
                index = 4;
            }
            index--;
            // ul 移动对应的位置
            oUl.style.left = - index * 300 + 'px';
            // 小方块的颜色也需要移动
            for (var i = 0; i < oLis.length; i++) {
                oLis[i].style.background = 'yellow';
            }
            // 把当前播放的这一张变成绿色   index
            oLis[index].style.background = 'green';


            // 自动播放
            t = setInterval(function () {
                if (index === 3) {
                    index = -1;   // 因为后面有++
                }
                index++;
                // ul移动到对应的 位置  -index * 300
                oUl.style.left = - index * 300 + 'px';


                // 先清除所有的小方块的颜色
                // oLis[0].style.background = 'yellow' ;
                // oLis[1].style.background = 'yellow' ;
                // oLis[2].style.background = 'yellow' ;
                // oLis[3].style.background = 'yellow' ;
                for (var i = 0; i < oLis.length; i++) {
                    oLis[i].style.background = 'yellow';
                }
                // 把当前播放的这一张变成绿色   index
                oLis[index].style.background = 'green';


            }, 1000)


        }


        oNext.onclick = function () {
            clearInterval(t);
            if (index === 3) {
                index = -1;
            }
            index++;
            // ul 移动对应的位置
            oUl.style.left = - index * 300 + 'px';
            // 小方块的颜色也需要移动
            for (var i = 0; i < oLis.length; i++) {
                oLis[i].style.background = 'yellow';
            }
            // 把当前播放的这一张变成绿色   index
            oLis[index].style.background = 'green';




            // 自动播放
            t = setInterval(function () {
                if (index === 3) {
                    index = -1;   // 因为后面有++
                }
                index++;
                // ul移动到对应的 位置  -index * 300
                oUl.style.left = - index * 300 + 'px';


                // 先清除所有的小方块的颜色
                // oLis[0].style.background = 'yellow' ;
                // oLis[1].style.background = 'yellow' ;
                // oLis[2].style.background = 'yellow' ;
                // oLis[3].style.background = 'yellow' ;
                for (var i = 0; i < oLis.length; i++) {
                    oLis[i].style.background = 'yellow';
                }
                // 把当前播放的这一张变成绿色   index
                oLis[index].style.background = 'green';


            }, 1000)




        }





    </script>

</body>

</html>